
<div class="portlet-body form " id="form_wizard_1">
	<form action="#" class="form-horizontal" id="form-ujian" method="post">
	<div class="form-wizard">
		<div class="navbar steps">
			<div class="navbar-inner">
				<ul class="row-fluid">
					<li class="span3"><a href="#tab1" data-toggle="tab"
						class="step active"> <span class="number">1</span> <span
							class="desc"><i class="icon-ok"></i>Detail Ujian</span>
					</a></li>
					<li class="span3"><a href="#tab2" data-toggle="tab" class="step"> <span
							class="number">2</span> <span class="desc"><i class="icon-ok"></i>Soal Ujian</span>
					</a></li>
				</ul>
			</div>
		</div>
		<div id="bar" class="progress progress-success progress-striped">
			<div class="bar"></div>
		</div>
		<div class="tab-content">
			<div class="tab-pane active" id="tab1">
				<div class="control-group">
					<label class="control-label">Judul Ujian</label>
					<div class="controls">
						<input type="text" class="span6 m-wrap" name="uj_name" value="<?php echo $uj_name;?>" /> 
						<span class="help-inline">(judul ujian)</span>
					</div>
				</div>
				<div class="control-group">
					<label class="control-label">Mata Pelajaran</label>
					<div class="controls">
						<select class="span6 chosen" data-placeholder="Choose a Category" tabindex="1" name="mp_id">
							<option value="" />Pilih Mata Pelajaran...
							<?php foreach($row_mp as $row){ 
								$selected = "";
								if($row->mp_id == $mp_id) $selected = "selected";
								?>
								<option <?php echo $selected;?> value="<?php echo $row->mp_id;?>" /><?php echo $row->mp_name;?>
							<?php }?>
						</select>
					</div>
				</div>

				<div class="control-group">
					<label class="control-label">Tanggal</label>
					<div class="controls">
						<input class="m-wrap m-ctrl-medium date-picker" size="16" type="text" value="<?php echo $uj_date;?>" name="uj_date" />
					</div>
				</div>

				<div class="control-group">
					<label class="control-label">Waktu Mulai</label>
					<div class="controls">
                    	<div class="input-append">
                    		<input type="text" id="clockface_1" class="m-wrap small"  value="<?php echo $uj_start;?>" name="uj_start" />
                            <button class="btn" type="button" id="clockface_1_toggle-btn">
                            	<i class="icon-time"></i>
                            </button>
                        </div>
					</div>
				</div>
				
				<div class="control-group">
					<label class="control-label">Waktu Selesai</label>
					<div class="controls">
                    	<div class="input-append">
                    		<input type="text" id="clockface_2" class="m-wrap small"  value="<?php echo $uj_end;?>" name="uj_end" />
                            <button class="btn" type="button" id="clockface_2_toggle-btn">
                            	<i class="icon-time"></i>
                            </button>
                        </div>
					</div>
				</div>
			</div>
			
			
			<div class="tab-pane" id="tab2">
				<!-- BEGIN FORM-->
				<div class="portlet-body">
					<table class="table table-striped table-bordered" id="soal_table">
						<thead>
							<tr>
								<th style="width: 8px;"><input type="checkbox"
									class="group-checkable" data-set="#sample_1 .checkboxes" />
								</th>
								<th>Isi Soal</th>
								<th class="hidden-phone">Edit</th>
							</tr>
						</thead>
						<tbody>
						</tbody>
					</table>
					<a href="#" class="btn blue" id="add-soal">Add</a>
				</div>
				<!-- END FORM-->
			</div>
		</div>
        <div class="form-actions clearfix">
        	<a href="javascript:;" class="btn button-previous"><i class="m-icon-swapleft"></i>Back</a>
            <a class="btn blue button-next" id="next">Continue<i class="m-icon-swapright m-icon-white"></i></a>
            <a href="javascript:;" class="btn green button-submit" id="submit-ujian">Submit <i class="m-icon-swapright m-icon-white"></i></a>
        </div>
	</div>
	</form>
</div>
<div class="portlet-body form" id="popup-form">
	<!-- BEGIN FORM-->
	<form action="#" class="form-vertical" id="form-add-soal">
		<div class="row-fluid">
		
			<div class="span8 sortable">
		
			<div class="control-group">
				<label class="control-label">Soal</label>
				<div class="controls">
					<textarea class="ckeditor so_desc" cols="80" id="editor1" name="so_desc" rows="10"></textarea>
				</div>
			</div>		
			</div>
		<div class="span4 sortable">	
		<div class="control-group">
                <label class="control-label">Upload Gambar</label>
                    <div class="controls">
                                 <div class="fileupload fileupload-new" data-provides="fileupload">
                                    <div class="fileupload-new thumbnail" style="width: 200px; height: 150px;">
                                       <img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image" alt="" />
                                    </div>
                                    <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
                                    <div>
                                       <span class="btn btn-file"><span class="fileupload-new">Select image</span>
                                       <span class="fileupload-exists">Change</span>
                                       <input type="file" class="default" /></span>
                                       <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
                                    </div>
                                 </div>
                </div>
            </div>
			</div>
</div>
		<div class="row-fluid">	
			<div class="control-group">
				<label class="control-label">Jawaban</label>
				<div class="controls">

					<label class="radio line">
					<input type="radio" name="ja_stat" value="1" checked="checked"/> OPSI 1 </label> 
					<input type="text" placeholder="Jawaban 1" class="span8 m-wrap ja_desc1" name="ja_desc1"/> 
					<label class="radio line"><input type="radio" name="ja_stat" value="2" /> OPSI 2 </label> 
					<input type="text" placeholder="Jawaban 2" class="span8 m-wrap ja_desc2" name="ja_desc2"/> 
					<label class="radio line"><input type="radio" name="ja_stat" value="3" /> OPSI 3 </label>
					<input type="text" placeholder="Jawaban 3" class="span8 m-wrap ja_desc3" name="ja_desc3"/> 
					<label class="radio line"><input type="radio" name="ja_stat" value="4" /> OPSI 4 </label> 
					<input type="text" placeholder="Jawaban 4" class="span8 m-wrap ja_desc4" name="ja_desc4"/>
				</div>
			
			</div>
			<div class="span6 sortable">
			<input type="hidden" name="uj_id" id="uj_id" />
			<button type="submit" id="submit-soal" class="btn green button-submit">Submit</button>
			<button type="submit" id="submit-soal" class="btn blue"><i class="icon-plus"></i> Add</button>
			</div>
		</div>
	</form>
	<!-- END FORM-->
</div>
<script type="text/javascript">	
	function popup_form(id){
		if(id)url = "<?php echo base_url();?>soal/update";
		else{
			url = "<?php echo base_url();?>soal/insert";
			document.getElementById('form-add-soal').reset();
			CKEDITOR.instances['editor1'].setData('');
		}
				
		var dimmer = document.createElement("div");
		dimmer.style.width =  $(window).width() + 'px';
	    dimmer.style.height = $(window).height() + 'px';
	    dimmer.className = 'dimmer';
	
	    dimmer.onclick = function(){
	        document.body.removeChild(this);   
	        $('#popup-form').css('display', 'None');
	    };
	
	    document.body.appendChild(dimmer);
	    
		var cssObj = {
		  'display': 'block',
		  'top': '50px',
		  'left': ($(window).width()-$('#popup-form').width())/2 + 'px'
		};
		$('#popup-form').css(cssObj);
		
		$("#form-add-soal").unbind('submit');
		$("#form-add-soal").submit(function(){
			var post = $(this).serialize();
			if(id) post = $(this).serialize()+'&so_id='+id;
			$.post(url, post)
				.done(function(data) {
					var rows = $.parseJSON(data);
					if(id) update_row(rows);
					else insert_row(rows);
				});
			return false;
		});
	}

	function insert_row(rows){
		var row = '';
		$.each(rows, function(i, item) {
			row += '<tr>'+
				'<td><input type="checkbox" class="checkboxes" value="1" /></td>'+
				'<td id="col'+item.so_id+'">'+item.so_desc+'</td>'+
				'<td>'+
					'<a href="#" class="btn mini purple" id="edit-soal" onclick="update('+item.so_id+')"><i class="icon-edit"></i> Edit </a> '+
            		'<a href="#" class="btn mini black"><i class="icon-trash" id="edit-soal"></i> Delete</a>'+
            	'</td>'+
            '</tr>';	
		});
		$('#soal_table > tbody:last').append(row);	
	}

	function update_row(rows){
		var row = '';
		$.each(rows, function(i, item) {
			$('#'+item.so_id).text(item.so_desc);	
		});
	}

	function update(id){
		$.getJSON("<?php echo base_url();?>soal/get_soal/"+id,
	    	function(data){
	    		$.each(data, function(field, value) {
		    		switch(field){
		    		case "so_desc":
		    			CKEDITOR.instances['editor1'].setData(value);
		    			break;
		    		case "ja_stat":
		    			$(".ja_stat").checked = true;
			    		break;
		    		default:
			    		$("."+field).val(value);
		    		}
	    	    });
	    	}
    	);
		popup_form(id);
	}
	
	$("#add-soal").click(function() {
		popup_form(false);	
	});		
	
	$("#next").click(function(){
		var form = document.getElementById("form-ujian");
		var error = "";
		if(form.uj_name.value == "") error += "Judul Ujian tidak boleh kosong\n";
		if(form.mp_id.value == "") error += "Mata Pelajaran tidak boleh kosong\n";
		if(form.uj_date.value == "") error += "Tanggal Ujian tidak boleh kosong\n";
		if(form.uj_start.value == "") error += "Waktu Mulai Ujian tidak boleh kosong\n";
		if(form.uj_end.value == "") error += "Waktu Selesai Ujian tidak boleh kosong";
		if(error!=""){
			alert(error);
			return false;
		}
		$.post("<?php echo base_url();?>ujian/insert", $("#form-ujian").serialize())
			.done(function(data) {
				$("#uj_id").val(data);
			});
	});
</script>
<!-- 
<script type="text/javascript">
	window.onload = function(){
		$.get("<?php echo base_url();?>soal/reset_soal", function(data) {
	    	$('#so_id').val(parseInt(data)+1);
	    });
	};
	window.onbeforeunload = function() {
		return "Are you sure you want to navigate away?";
	};
	var request;
	if (window.XMLHttpRequest) request=new XMLHttpRequest();
	else request=new ActiveXObject("Microsoft.XMLHTTP");
</script>
<script type="text/javascript">
	
	var lightbox = document.getElementById("popup-form"),
		dimmer = null,
		form = document.getElementById("form-add-soal");

	function init_form(){
		dimmer = document.createElement("div");
		dimmer.style.width =  window.innerWidth + 'px';
	    dimmer.style.height = window.innerHeight + 'px';
	    dimmer.className = 'dimmer';
	
	    dimmer.onclick = function(){
	        document.body.removeChild(this);   
	        lightbox.style.display = 'None';
	    };
	
	    document.body.appendChild(dimmer);
	
	    lightbox.style.display = 'block';
	    lightbox.style.top = '50px';
	    lightbox.style.left = (window.innerWidth-1000)/2 + 'px';
	}
	
	function popup_form(id){		
		var button = document.getElementById("submit-soal");
		
	    init_form();
	    
	    if(id=='add') form.reset();
	    else request_soal(id);
	    
		$("#form-add-soal").unbind('submit');
		$("#form-add-soal").submit(function() {
			$.post("<?php echo base_url();?>soal/insert_soal", $(this).serialize()).done(function(data) {
				$('#soal_table > tbody').empty();
				var rows = $.parseJSON(data);
				var row = '';
				$.each(rows, function(i, item) {
					row += '<tr>'+
						'<td><input type="checkbox" class="checkboxes" value="1" /></td>'+
						'<td>'+item.so_desc+'</td>'+
						'<td>'+
							'<a href="#" class="btn mini purple" id="edit-soal" onclick="popup_form(\'a.'+item.so_id+'\')"><i class="icon-edit"></i> Edit </a> '+
		            		'<a href="#" class="btn mini black"><i class="icon-trash" id="edit-soal"></i> Delete</a>'+
		            	'</td>'+
		            '</tr>';
			    	$('#so_id').val(parseInt(item.so_id)+1);		
				});
				$('#soal_table > tbody:first').append(row);		
			});
			return false;
		});
	};
	}
</script>
<script type="text/javascript">
	var submit = document.getElementById("submit-ujian");
	submit.onclick = function(){
		
	};	
</script>
-->